<template>
  <div>
    <h1>当前计数: {{ count }}</h1>
    <h1>双倍快乐: {{ doubleCount }}</h1>
    <button @click="increment">+</button>
    <hr />
    <h1>{{ fullname }}</h1>
    <button @click="changeFullname">changeFullname</button>
  </div>
</template>

<script>
import { ref, computed } from 'vue'
export default {
  setup() {
    const count = ref(100)
    const firstname = ref('qf')
    const lastname = ref('html5')

    const increment = () => {
      count.value += 1
    }

    const doubleCount = computed(() => count.value * 2)

    const fullname = computed({
      get() {
        return firstname.value + '-' + lastname.value
      },
      set(val) {
        console.log(val)
        let arr = val.split('-')
        firstname.value = arr[0]
        lastname.value = arr[1]
      },
    })

    const changeFullname = () => {
      fullname.value = 'qf-大数据'
    }

    return {
      count,
      doubleCount,
      increment,
      fullname,
      changeFullname,
    }
  },
}
</script>

<style
  lang="scss"
  scoped
></style>
